<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="ID">
        <el-input v-model="searchForm.id" placeholder="id"></el-input>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="searchForm.name" placeholder="计算器名称"></el-input>
      </el-form-item>
      <el-form-item label="计算器类型">
        <el-select v-model="searchForm.type" placeholder="请选择计算器类型">
          <el-option label="请选择" value=""></el-option>
          <el-option v-for="(value, key, index) in typeNameMap" :label="value" :value="key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="贷款期限">
        <el-input v-model="searchForm.loanTerm" placeholder="贷款期限, 单位:月"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" size="small" @click="onSearch">查询</el-button>
        <el-button icon="el-icon-circle-plus-outline" type="danger" size="small" @click="onAdd">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="计算器名称" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="计算器描述" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.description }}
        </template>
      </el-table-column>
      <el-table-column label="计算器类型" width="110" align="center">
        <template slot-scope="scope">
          <el-tag effect="dark" :type="scope.row.type | typeFilter">{{ typeNameMap[scope.row.type.toString()] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="贷款期限" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.loanTerm }}
        </template>
      </el-table-column>
      <el-table-column label="利率" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.rate }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="updater" label="最后修改人" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.updaterName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created" label="创建时间" width="200">
        <template slot-scope="scope">
          <span>{{ formatTime(scope.row.created) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="updated" label="修改时间" width="200">
        <template slot-scope="scope">
          <span>{{ formatTime(scope.row.updated) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="onEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
          <el-button size="mini" @click="onClone(scope.$index, scope.row)">复制
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handlePageSizeChange" @current-change="handleCurrentPageChange"
      layout="prev, pager, next" :current-page=currentPage :page-size=pageSize :total=total>
    </el-pagination>

    <el-dialog title="新增/编辑" :visible.sync="formVisible">
      <el-form :model="form" label-position="left" label-width="120px" size="mini">
        <el-form-item label="计算器名称">
          <el-input v-model="form.name" autocomplete="off" placeholder="注意不能和已有的计算器名称重复"></el-input>
        </el-form-item>
        <el-form-item label="计算器描述">
          <el-input v-model="form.description" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="计算器类型">
          <el-select v-model="form.type" placeholder="请选择计算器类型">
            <el-option v-for="(value, key, index) in typeNameMap" :label="value" :value="key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="贷款期限">
          <el-input v-model="form.loanTerm" placeholder="单位:月" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="贷款利率" label-suffix="%">
          <el-input v-model="form.rate" autocomplete="off"></el-input>
        </el-form-item>

        <div v-if="form.type==4">
          <el-divider>气球贷</el-divider>
          <el-form-item label="气球贷-还款方式">
            <el-select v-model="form.ballonType" placeholder="请选择 气球贷-还款方式">
              <el-option v-for="(value, key, index) in ballonTypeNameMap" :label="value" :value="key"></el-option>
            </el-select>
          </el-form-item>
          <div v-if="form.ballonType < 3">
            <!-- 等额本息、等额本金，可以设置还款周期 -->
            <el-form-item label="气球贷-还款周期">
              <el-select v-model="form.ballonRepayPeriod" placeholder="请选择 气球贷-还款周期">
                <el-option v-for="(value, key, index) in ballonRepayPeriodNameMap" :label="value" :value="key">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div v-if="form.ballonType == 3">
            <!-- 先息后本，只能按月还款，需要设置本金还款周期和每期本金还款比例 -->
            <el-form-item label="气球贷-每期本金还款比例" placeholder="单位: %" label-suffix="%">
              <el-input v-model="form.ballonPrincipalRate" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="气球贷-本金还款周期">
              <el-input v-model="form.ballonPrincipalRepayPeriod" placeholder="本金还款周期应小于贷款期限, 单位: 月" autocomplete="off"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="气球贷-利率浮动">
            <el-select v-model="form.ballonFloat" placeholder="请选择 气球贷-利率浮动形式">
              <el-option v-for="(value, key, index) in ballonFloatNameMap" :label="value" :value="key"></el-option>
            </el-select>
          </el-form-item>
          <div v-if="form.ballonFloat!=0">
            <el-form-item label="气球贷-利率浮动比例" label-suffix="%">
              <el-input v-model="form.ballonFloatRate" autocomplete="off"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="气球贷-还款期限">
            <el-input v-model="form.ballonLimitTerm" placeholder="大于贷款期限，小于360" autocomplete="off"></el-input>
          </el-form-item>
        </div>

        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    searchCalculator,
    saveCalculator,
    deleteCalculator
  } from '@/api/calculator'
  import {
    parseTime
  } from "@/utils";

  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      },
      typeFilter(type) {
        const typeMap = {
          "1": '',
          "2": 'success',
          "3": 'danger',
          "4": 'warning'
        }
        return typeMap[type]
      }
    },
    data() {
      return {
        list: null,
        listLoading: true,
        currentPage: 1,
        pageSize: 20,
        total: 20,
        searchForm: {
          id: null,
          name: '',
          type: null,
          loanTerm: null
        },
        typeNameMap: {
          "1": "等额本息",
          "2": "等额本金",
          "3": "先息后本",
          "4": "气球贷"
        },
        ballonTypeNameMap: {
          "1": "等额本息",
          "2": "等额本金",
          "3": "先息后本"
        },
        ballonRepayPeriodNameMap: {
          "1": "按月还款",
          "3": "按季还款",
          "6": "半年还款",
          "12": "按年还款"
        },
        ballonFloatNameMap: {
          "0": "无",
          "1": "上浮",
          "2": "下浮"
        },
        form: {
          id: null,
          name: null,
          description: null,
          type: null,
          loanTerm: null,
          rate: null,
          ballonType: null,
          ballonFloat: null,
          ballonFloatRate: null,
          ballonLimitTerm: null,
          ballonRepayPeriod: null,
          ballonPrincipalRate: null,
          ballonPrincipalRepayPeriod: null
        },

        formVisible: false,
        lastEditFormId: null,
        policeForm: {
          policeValue: null,
          policeIndex: null,
        },
        policeFormVisible: false,
        lastPoliceEditIndex: null,

        calculatorFormVisible: false,

      }
    },

    created() {
      this.fetchData()
    },

    methods: {
      onSearch() {
        this.currentPage = 1
        this.fetchData()
      },
      handlePageSizeChange(size) {
        this.pageSize = size;
        this.fetchData()
      },
      handleCurrentPageChange(page) {
        this.currentPage = page;
        this.fetchData()
      },
      fetchData() {
        this.listLoading = true
        searchCalculator({
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          id: this.searchForm.id,
          name: this.searchForm.name,
          type: this.searchForm.type,
          loanTerm: this.searchForm.loanTerm,
          sortField: "updated",
          sortMode: "desc"
        }).then(response => {
          this.list = response.data.items
          this.total = response.data.total
          this.listLoading = false
        })
      },
      formatTime(timeStamp) {
        return parseTime(timeStamp, "{y}-{m}-{d} {h}:{i}:{s}")
      },

      handleDelete(index, row) {
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteCalculator(row.id).then(response => {
            this.fetchData()
          })
        })
      },

      onAdd() {
        this.form.id = null
        this.form.name = null
        this.form.description = null
        this.form.type = null
        this.form.loanTerm = null
        this.form.rate = null
        this.form.ballonType = null
        this.form.ballonFloat = null
        this.form.ballonFloatRate = null
        this.form.ballonLimitTerm = null
        this.form.ballonRepayPeriod = null
        this.ballonPrincipalRate = null
        this.ballonPrincipalRepayPeriod = null
        this.lastFormEditId = null
        this.formVisible = true
      },

      onEdit(index, row) {
        this.form.id = row.id
        this.form.name = row.name
        this.form.description = row.description
        this.form.type = row.type == null ? null : (row.type).toString()
        this.form.loanTerm = row.loanTerm
        this.form.rate = row.rate
        this.form.ballonType = row.ballonType == null ? null : (row.ballonType).toString()
        this.form.ballonFloat = row.ballonFloat == null ? null : (row.ballonFloat).toString()
        this.form.ballonFloatRate = row.ballonFloatRate
        this.form.ballonLimitTerm = row.ballonLimitTerm
        this.form.ballonPrincipalRate = row.ballonPrincipalRate
        this.form.ballonPrincipalRepayPeriod = row.ballonPrincipalRepayPeriod
        this.form.ballonRepayPeriod = row.ballonRepayPeriod == null ? null : (row.ballonRepayPeriod).toString()
        this.lastFormEditId = row.id
        this.formVisible = true
      },

      onClone(index, row) {
        this.form.id = null
        this.form.name = row.name + "复制"
        this.form.phone = row.phone
        this.form.description = row.description
        this.form.type = row.type
        this.form.loanTerm = row.loanTerm
        this.form.rate = row.rate
        this.form.ballonType = row.ballonType
        this.form.ballonFloat = row.ballonFloat
        this.form.ballonFloatRate = row.ballonFloatRate
        this.form.ballonLimitTerm = row.ballonLimitTerm
        this.form.ballonRepayPeriod = row.ballonRepayPeriod
        this.form.ballonPrincipalRate = row.ballonPrincipalRate
        this.form.ballonPrincipalRepayPeriod = row.ballonPrincipalRepayPeriod
        this.formVisible = true
      },

      handleCancel() {
        this.formVisible = false
      },

      handleSave() {
        this.$confirm('确认保存?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const params = {
            "id": this.form.id,
            "name": this.form.name,
            "description": this.form.description,
            "type": this.form.type,
            "loanTerm": this.form.loanTerm,
            "rate": this.form.rate,
            "ballonType": this.form.ballonType,
            "ballonFloat": this.form.ballonFloat,
            "ballonFloatRate": this.form.ballonFloatRate,
            "ballonLimitTerm": this.form.ballonLimitTerm,
            "ballonRepayPeriod": this.form.ballonRepayPeriod,
            "ballonPrincipalRate": this.form.ballonPrincipalRate,
            "ballonPrincipalRepayPeriod": this.form.ballonPrincipalRepayPeriod,
          }
          saveCalculator(params).then(response => {
            this.form.id = null,
              this.form.name = null,
              this.form.description = null,
              this.form.type = null,
              this.form.loanTerm = null,
              this.form.rate = null,
              this.form.ballonType = null,
              this.form.ballonFloat = null,
              this.form.ballonFloatRate = null,
              this.form.ballonLimitTerm = null,
              this.form.ballonRepayPeriod = null,
              this.ballonPrincipalRate = null,
              this.ballonPrincipalRepayPeriod = null,
              this.formVisible = false
            this.lastFormEditId = null
            this.fetchData()
          })
        })
      }
    }
  }
</script>
